<template>
  <div class="lunbo-edit">
    <el-tabs v-model="activeName">
      <el-tab-pane label="编辑" name="1">
        <div class="subhead">
          <p>{{ blockData.content }}</p>
        </div>
        <el-form ref="broadsidemarketForm" :model="broadsidemarketForm">
          <div
            v-for="(item,index) in broadsidemarketForm.advertisingInfo"
            :key="index"
            class="streamerList"
          >
            <div class="hintheadBox">
              <div class="hinthead">课程栏目侧边营销模块</div>
              <div class="suggest">建议图片大小为270*482</div>
              <el-collapse accordion class="elcollapse" change="showIndex(index)">
                <el-collapse-item>
                  <template slot="title">
                    <span class="title">
                      <i class="el-icon-rank" style="font-size:18px"/>
                      课程栏目侧边营销模块-
                      <a :href="item.url" target="_Blank">
                        <i class="header-icon el-icon-picture"/>
                      </a>
                      <a href="#" style="color: #428bca;" target="_Blank">{{ item.describe }}</a>
                    </span>
                  </template>
                  <el-form-item label="图片" style="margin-top:22px;">
                    <el-input v-model="item.url" style="width:300px;"/>
                    <el-upload
                      :on-change="handleChange"
                      class="upload-demo"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      style="display:inline-block"
                    >
                      <el-button size="small" type="primary" @click="getlistIndex(index)">上传</el-button>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="图片描述">
                    <el-input v-model="item.describe" style="width:300px;"/>
                  </el-form-item>
                  <el-form-item label="图片链接">
                    <el-input v-model="item.link" style="width:300px;"/>
                  </el-form-item>
                  <el-form-item label="背景色填充">
                    <el-color-picker v-model="item.backgroundColor" size="small"/>
                  </el-form-item>
                  <el-form-item label="打开新窗口">
                    <el-radio v-model="item.radio" label="yes">是</el-radio>
                    <el-radio v-model="item.radio" label="no">否</el-radio>
                  </el-form-item>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
          <el-button type="primary" style="margin:20px">保存设置</el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="历史记录" name="2">
        <div v-if="activeName === '2'">
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="createTimeStr" label="修改时间" min-width="20" align="center"/>
            <el-table-column prop="userName" label="修改用户" min-width="10" align="center"/>
            <el-table-column prop="manage" label="操作" min-width="20" align="center">
              <template slot-scope="scope">
                <el-button type="primary" @click="preview(scope.row)">预览</el-button>
                <el-button type="success" @click="recovery(scope.row)">恢复此内容</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: '1',
      blockData: {
        content: '彩虹树主题: 首页课程栏目.侧边营销模块'
      },
      broadsidemarketForm: {
        advertisingInfo: [
          {
            url: 'file/img',
            describe: '建议图片大小为270*482',
            link: 'http://www.edusoho.com',
            backgroundColor: '#1d75ed',
            radio: 'yes',
            fileList: []
          }
        ]
      },
      tableData: [
        {
          createTimeStr: '2019-03-06',
          userName: 'testedu'

        }
      ]
    }
  },
  methods: {
    getlistIndex(index) {
      this.uploadIndex = index
    },
    handleChange(file, fileList) {
      const bsList = this.broadsidemarketForm.advertisingInfo[this.uploadIndex]
      bsList.url = file.url
      bsList.fileList = fileList.slice(-1)
    }
  }
}
</script>
<style lang="scss">
.lunbo-edit {
  padding: 0 20px;
  .el-tabs__item {
    font-size: 16px;
  }
  .hintheadBox {
    .el-form-item__label {
      width: 300px;
    }
  }
  .subhead {
    background-color: #f8f8f8;
    width: 100%;
    height: 40px;
    line-height: 40px;
    p {
      margin: 0;
      box-sizing: border-box;
      padding-left: 20px;
    }
  }
  .hintheadBox {
    padding: 0 20px;
    .hinthead {
      font-weight: 700;
      margin-top: 20px;
    }
    .suggest {
      color: #999;
    }
    .elcollapse {
      width: 900px;
      margin-top: 20px;
    }
    .el-collapse-item__header {
      background-color: #f0f3ff;
    }
    .el-collapse-item__header.is-active {
      background-color: #e4fafd;
    }
    .el-collapse-item__header .title {
      font-size: 16px;
      padding: 0 20px;
      width: 500px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .el-upload-list {
      display: none;
    }
  }
}
</style>
